<%@ page isELIgnored="false"  language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<style>
		form
		{
			height: 400px;
			width:310px;
			border-style:solid;
			border-width:1px; 
			margin:auto;
			margin-top:120px;
		}
		div
		{
			margin-left:68px;
			margin-top:20px;
		}
	</style>
	<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
	</script>
	
</head>
<body>
	<form action="${pageContext.request.contextPath }/user/signup" method="post">
	<div>
		<label>用户名</label><br/><input id="username" type="text" name="username"/><label id="repeat"></label><br/>
		<label>密码</label><br/><input id="password" type="password" name="password" onblur="a()"/><label id="repeat2"></label><br/>
		<label>电话</label><br/><input id="phonenum" type="text" name="phonenum" onblur="b()"/><label id="repeat3"></label><br/>
		<label>真实姓名</label><br/><input id="name" type="text" name="name" onblur="c()"/><label id="repeat4"></label><br/>
		<label>邮箱</label><br/><input id="email" type="text" name="email" onblur="d()"/><label id="repeat5"></label><br/>
		<input type="radio" name="sex" value="male" checked="checked">Male<input type="radio" name="sex" value="female">Female
		<input type="button" value="确认" onclick="check()"/>
	</div>
	</form>

	<script>
	$(document).ready(function()
				{
				$("#username").blur
				(
				function(){
				$.ajax({
						url:"${pageContext.request.contextPath }/user/checkusername?username="+$("#username").val(),
						type:"get",
						success:function(result)
						{
							if($.trim($("#username").val())=="")
							{
								$("#repeat").html("<span style='color:red'>请输入用户名</span>");
								return;
							}
							else if(result=="true")
							{
								$("#repeat").html("<span style='color:green'>用户名可用</span>");
								return;
							}
							else
							{
								$("#repeat").html("<span style='color:red'>用户名已存在</span>");
							}
								
						}	
				})})})
				
	function a()
	{
		if($.trim($("#password").val())=="")
		{
			$("#repeat2").html("<span style='color:red'>请输入密码</span>");
			return;
		}
		else
		{
			$("#repeat2").empty();
		}
	}
	function b()
	{
		if($.trim($("#phonenum").val())=="")
		{
			$("#repeat3").html("<span style='color:red'>请输入电话</span>");
			return;
		}
		else
		{
			var str = $("#phonenum").val();
		    var ret = /^1[34578]\d{9}$/;
		    if(!(ret.test(str))){
		    	$("#repeat3").html("<span style='color:red'>号码格式错误</span>");
		    	return;
		    }
		    
		}
		$("#repeat3").empty();
	}
	function c()
	{
		if($.trim($("#name").val())=="")
		{
			$("#repeat4").html("<span style='color:red'>请输入姓名</span>");
			return;
		}
		else
		{
			$("#repeat4").empty();
		}
	}
	function d()
	{
		if($.trim($("#email").val())=="")
		{
			$("#repeat5").html("<span style='color:red'>请输入邮箱</span>");
			return;
		}
		else
		{
			var str = $("#email").val();
		    var ret = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
		    if(!(ret.test(str))){
		    	$("#repeat5").html("<span style='color:red'>邮箱格式错误</span>");
		    	return;
		    }
		}
		$("#repeat5").empty();
	}
	 function check() {

        if($.trim($("#username").val())=="") {
               alert("请输入用户帐号!");
               return false;
          }
      	if($.trim($("#password").val())==""){
               alert("请输入登录密码!");
               return false;
        }
      	if($.trim($("#phonenum").val())==""){
            alert("请输入电话!");
            return false;
     }
      	if($.trim($("#name").val())==""){
            alert("请输入姓名!");
            return false;
     }
      	if($.trim($("#email").val())==""){
            alert("请输入邮箱!");
            return false;
     }
      $("form")[0].submit();
}
	</script>
</body>

</html>